<template>
  <div class="fill">
    <div class="table">
      <el-table
        v-loading="data.loading"
        element-loading-text="数据加载中..."
        :data="data.loginlogData"
        class="fill"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column
          fixed
          prop="adminName"
          label="登录的管理员"
          width="200"
        />
        <el-table-column prop="code" sortable label="登录码" />
        <el-table-column prop="createTimeStr" sortable label="创建时间" />
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        background
        :page-size="datas.limit"
        layout="prev, pager, next"
        :total="datas.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, watch, onMounted } from "vue";
import { loginlogPagination } from "@/api/loginlog/index";

const props = defineProps({
  searchWord: {
    type: String,
  },
  flag: {
    type: Boolean,
  },
});

const data = reactive({
  loginlogData: [],
  loading: false,
});

const datas = reactive({
  page: 1,
  limit: 10,
  total: 0,
});

// �����ҳ
const handleSizeChange = (val: number) => {
  datas.page = 1;
  datas.limit = val;
};
const handleCurrentChange = (val: number) => {
  datas.page = val;
};

const bind = async () => {
  data.loading = true;
  const res = await loginlogPagination({
    page: datas.page,
    limit: datas.limit,
    key: props.searchWord,
  });
  if (res.code === 0) {
    data.loginlogData = res.data.data;
    datas.total = res.data.total;
  }
  data.loading = false;
};

// �������ݱ仯
watch([datas, () => props.searchWord, () => props.flag], (newVal, oldVal) => {
  bind();
});

// ҳ�������ɺ�ִ��
onMounted(() => {
  bind();
});
</script>

<style scoped></style>
